<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="back" @click="navigateBack">
				<uni-icons type="left" size="20" color="#fff"></uni-icons>
			</view>
			<view class="title">优惠券</view>
			<view class="right"></view>
		</view>
		<!-- 优惠券列表 -->
		<view class="coupon-container">
			<!-- 待使用 -->
			<view v-if="currentTab === 0">
				<scroll-view scroll-y class="scroll-view">
					<view class="coupon-list">
						<view v-if="unusedCoupons.length>0">
							<view class="coupon-item" v-for="(coupon, index) in unusedCoupons" :key="index">
								<view class="coupon-content">
									<view class="limit-text">仅限于{{ coupon.shopName }}使用</view>
									<view class="amount-text">满{{ coupon.minAmount }}元可用</view>
									<view class="date-text">
										有效期至：{{ coupon.startDate }}—{{ coupon.endDate }}
									</view>
								</view>
								<view class="amount">
									<text class="symbol">¥</text>
									<text class="number">{{ coupon.amount }}</text>
								</view>
								<view class="use-btn" @click="goToUse(coupon)">
									去使用 >
								</view>
							</view>
						</view>
						<view v-else>
							<text>暂无待使用优惠券</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	// 定义响应式数据
	const currentTab = ref(0);
	const unusedCoupons = ref([{
			amount: 20,
			minAmount: 200,
			shopName: 'XX加油站',
			startDate: '2020.04.11',
			endDate: '2023.05.11'
		},
		{
			amount: 20,
			minAmount: 200,
			shopName: 'XX加油站',
			startDate: '2020.04.11',
			endDate: '2023.05.11'
		},
		{
			amount: 20,
			minAmount: 200,
			shopName: 'XX加油站',
			startDate: '2020.04.11',
			endDate: '2023.05.11'
		}
	]);
	const usedCoupons = ref([{
		amount: 20,
		minAmount: 200,
		shopName: 'XX加油站',
		startDate: '2020.04.11',
		endDate: '2023.05.11'
	}]);
	const expiredCoupons = ref([{
		amount: 20,
		minAmount: 200,
		shopName: 'XX加油站',
		startDate: '2020.04.11',
		endDate: '2023.05.11'
	}]);
	// 打印数据，检查是否正确
	console.log('unusedCoupons:', unusedCoupons.value);
	console.log('usedCoupons:', usedCoupons.value);
	console.log('expiredCoupons:', expiredCoupons.value);
	// 定义方法
	const navigateBack = () => {
		uni.navigateBack();
	};

	const switchTab = (index) => {
		currentTab.value = index;
	};

	const goToUse = (coupon) => {
		// 跳转到使用页面
		uni.navigateTo({
			url: '/pages/store/index'
		});
	};
</script>

<style lang="scss" scoped>
	.bg {
		width: 100%;
		height: 250rpx;
		background-color: #007aff;
	}

	.coupon-container {
		flex: 1;
	}

	.swiper-item {
		margin-left: 10px;
		margin-right: 10px;
		margin-top: -200rpx;
		border-top-right-radius: 20px;
		border-top-left-radius: 20px;
	}

	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;
	}

	.nav-bar {
		display: flex;
		align-items: center;
		height: 44px;
		background-color: #007AFF;
		color: #fff;
		padding: 0 15px;

		.back {
			width: 44px;
		}

		.title {
			flex: 1;
			text-align: center;
			font-size: 18px;
		}

		.right {
			width: 44px;
		}
	}

	.tabs {
		display: flex;
		background-color: #007AFF;
		padding: 0 15px;
		padding-bottom: 10px;

		.tab-item {
			flex: 1;
			text-align: center;
			color: rgba(255, 255, 255, 0.7);
			font-size: 16px;
			padding: 10px 0;
			position: relative;

			&.active {
				color: #fff;
				font-weight: 500;

				&::after {
					content: '';
					position: absolute;
					bottom: -10px;
					left: 50%;
					transform: translateX(-50%);
					width: 20px;
					height: 3px;
					background-color: #fff;
					border-radius: 2px;
				}
			}
		}
	}

	.scroll-view {
		height: 100%;
	}

	.coupon-list {
		padding: 15px;
	}

	.coupon-item {
		background: linear-gradient(to right, #FF9966, #FF5E62);
		border-radius: 8px;
		margin-bottom: 15px;
		padding: 15px;
		position: relative;
		color: #fff;

		&::before,
		&::after {
			content: '';
			position: absolute;
			width: 20px;
			height: 20px;
			background-color: #f5f5f5;
			border-radius: 50%;
		}

		&::before {
			left: -10px;
			top: 50%;
			transform: translateY(-50%);
		}

		&::after {
			right: -10px;
			top: 50%;
			transform: translateY(-50%);
		}

		&.used,
		&.expired {
			background: #ccc;
			opacity: 0.8;
		}
	}

	.coupon-content {
		border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
		padding-bottom: 10px;
		margin-bottom: 10px;

		.limit-text {
			font-size: 14px;
			margin-bottom: 5px;
		}

		.amount-text {
			font-size: 16px;
			font-weight: 500;
			margin-bottom: 5px;
		}

		.date-text {
			font-size: 12px;
			opacity: 0.8;
		}
	}

	.amount {
		position: absolute;
		right: 15px;
		top: 15px;
		display: flex;
		align-items: baseline;

		.symbol {
			font-size: 16px;
			margin-right: 2px;
		}

		.number {
			font-size: 32px;
			font-weight: bold;
		}
	}

	.use-btn {
		text-align: right;
		font-size: 14px;

		&:active {
			opacity: 0.8;
		}
	}

	.status-text {
		text-align: right;
		font-size: 14px;
		opacity: 0.8;
	}
</style>